<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>咨询详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="{{asset('zhuanjia/font-awesome-4.7.0/css/font-awesome.css')}}">
    <link rel="stylesheet" href="{{asset('zhuanjia/style/weui.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('zhuanjia/style/style.css')}}"/>
</head>
<body style="background: #f5f5f5">
<!--头部-->
<!-- <div class="search-box">
    <button class="btn fa fa-angle-left back-icon"></button>
    <span>咨询详情</span>
</div>  -->
<!--end 头部-->
<div class="banner"><img src="https://zixun.c-make.net/zhuanjia/images/topbanner.png" alt=""></div>
<!--主体-->
<div class="detail-box">

    <!--咨询-->
    <h4 class="item-title">咨询内容</h4>
    <div class="detail-white-box">
        <h4 class="detail-box-title">咨询标题：{{$data->title}}</h4>
        <div class="detail-box-text"><b>咨询描述：</b>{{$data->contents}}
        </div>
        <!--上传的图片-->
        <div class="weui-cell pics-box">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <!--<div class="weui-uploader__hd">
                        <p class="weui-uploader__title"><b>图片</b></p>
                    </div>-->
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles1">

                            @if($data->pics)
                            @foreach(explode(',',$data->pics) as $pic)
                            
                            <li class="weui-uploader__file" style="background-image:url({{$pic}})"></li>
                            @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-gallery" id="gallery1">
            <span class="weui-gallery__img" id="galleryImg1"></span>
        </div>
        <!--end 上传的图片-->
    </div>
    <!--咨询-->

    @if($data->replies)
    <!-- 回复沟通-->
    <div class="QA-white-box">
        <h4 class="item-title">回复沟通</h4>
        <!--per box-->
        <div class="reply-box">
            <div class="weui-flex info-card-box">
                <div><img src="{{object_get($data,'expert.user.avatar')}}" class="detail-head-pic"></div>
                <div class="weui-flex__item">
                    <ul class="info-list-small">
                        <li>{{object_get($data,'expert.user.truename')}}</li>
                        <li>
                            <span style="display: inline-block;margin-right:5px">擅长领域：{{object_get($data,'expert.good_at')}}</span>
                            <span style="display: inline-block;margin-right:5px">职称：{{object_get($data,'expert.rank')}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            @foreach($data->replies as $r)
            <div class="reply-text">
                <p><b class="{{$r->type=='1'?'reply-b':''}}">{{$r->type=='1'?'专家回复：':array_get($wxuser,'nickname').'：'}}</b>{{$r->contents}}</p>
                <!--上传的图片-->
                <div class="weui-cell pics-box">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <!--<div class="weui-uploader__hd">
                                <p class="weui-uploader__title"><b>图片</b></p>
                            </div>-->
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles2">
                                     @if($r->pics)
                            @foreach(explode(',',$r->pics) as $pic)
                            
                            <li class="weui-uploader__file" style="background-image:url({{$pic}})"></li>
                            @endforeach
                            @endif
                                   
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>     
                
            </div>
            @endforeach
        </div>
        <!--per box-->

       
    </div>
    <!-- end 回复-->
    @endif

    <!-- 继续回复-->
    <div class="ask-box">
        <form action="{{url('user/reply-save')}}" method="post">
        <div class="weui-cells__title title-ask">回复</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入详细信息..." rows="5" name="contents" required=""></textarea>
                </div>
            </div>
        </div>
        <!--上传图片-->
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title consult-left-title">图片上传:</p>
                        <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file"
                                   accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
        <!--end上传图片-->
        <div class="ask-btn-box">
            <button href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">提交</button>
        </div>

        <input type="hidden" name="pics" id="pics" value=""/>
<input type="hidden" name="consult_id" value="{{$data->id}}" />
<input type="hidden" name="type" value="{{$type}}" />
{{csrf_field()}}
        </form>
    </div>

    <!-- end继续回复-->
</div>
<!--主体-->
<!--js-->
<script src="{{asset('zhuanjia/js/jquery-2.2.3.min.js')}}"></script>

<script type="text/javascript">
    //图片预览
    $(function () {
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)">' +
            '</li>',
            $gallery = $("#gallery1"),
            $galleryImg = $("#galleryImg1"),
            $uploaderInput = $("#uploaderInput1"),
            $uploaderFiles = $("#uploaderFiles1");

        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });
    });
</script>
<script>
    //上传
var thumbs = ''; 
    $(function () {

        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        var maxSize = 1024 * 1024 * 10; // 10240KB，也就是 10MB
        var maxWidth = 1900;  // 图片最大宽度
        var maxCount = 5;// 最大上传图片数量

        //
        var tmpl = '<li class="weui-uploader__file newfile" id="#ImgID#" style="background-image:url(#url#)">' +
            '</li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {

                    alert('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }

                if (file.size > maxSize) {
                    alert("图片太大，不允许上传", "forbidden");
                    continue;
                }

                if ($('.newfile').length >= maxCount) {
                    /*$('.weui-uploader__input-box').hide()*/
                    alert('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }


                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType, 0.6); //0.6指的是压缩60%

                        // 插入到预览区
                        $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));

                        var num = $('.newfile').length;
                        $('#uploadCount').text(num);

                         var url = "{{url('upload-base64')}}";
                        var data = {};
                        data.pic = base64;
                        data._token = "{{csrf_token()}}";
                        
                        
                        $.post(url,data,function(rs){
                            if(rs.status==true) {
                                thumbs = thumbs+rs.data+',';
                                $('#pics').val(thumbs); 
                            } else {
                                
                                return false;
                            }
                            console.info(thumbs);
                            
                        })


                        
                    };

                    img.src = e.target.result;


                    //这里实现上传
                    //$.ajax({});


                };
                reader.readAsDataURL(file);

            }
        });


        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            var num = $('.weui-uploader__file').length;
            $('#uploadCount').text(num);
        });


        $("#btnsaveCharge").click(function () {


            //或者在这里实现批量上传, 不建议批量上传
        });

    });

    //生成guid
    function genGUID() {
        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        return (G1 + G2);
    }

</script>
</body>
</html>